<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>智能案卷审阅系统</title>

    <!-- 引入 Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- 引入 FontAwesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />

    <!-- 配置 Tailwind 主题色 -->
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              primary: '#2563eb',
              surface: '#f8fafc',
              panel: '#ffffff',
            },
            boxShadow: {
              soft: '0 4px 20px -2px rgba(0, 0, 0, 0.05)',
              floating: '0 10px 40px -10px rgba(0, 0, 0, 0.15)',
            },
          },
        },
      }
    </script>

    <style>
      /* 全局字体优化 */
      body {
        font-family:
          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
        -webkit-font-smoothing: antialiased;
      }

      /* 隐形滚动条但可滚动 */
      .no-scrollbar::-webkit-scrollbar {
        display: none;
      }
      .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }

      /* 优雅的细滚动条 */
      .thin-scrollbar::-webkit-scrollbar {
        width: 4px;
      }
      .thin-scrollbar::-webkit-scrollbar-track {
        background: transparent;
      }
      .thin-scrollbar::-webkit-scrollbar-thumb {
        background: #e2e8f0;
        border-radius: 10px;
      }
      .thin-scrollbar::-webkit-scrollbar-thumb:hover {
        background: #cbd5e1;
      }

      /* 树形结构连接线 - 虚线风格 */
      .tree-line::before {
        content: '';
        position: absolute;
        left: -11px;
        top: 0;
        bottom: 0;
        width: 1px;
        background-image: linear-gradient(
          to bottom,
          #cbd5e1 33%,
          rgba(255, 255, 255, 0) 0%
        );
        background-position: left;
        background-size: 1px 4px;
        background-repeat: repeat-y;
        opacity: 0.6;
      }

      /* 幽灵输入框效果 */
      .ghost-input {
        transition: all 0.2s;
        background: transparent;
        border: 1px solid transparent;
      }
      .ghost-input:hover {
        background: #f8fafc;
        border-color: #e2e8f0;
      }
      .ghost-input:focus {
        background: white;
        border-color: #2563eb;
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
      }

      /* PDF 真实阴影 */
      .real-shadow {
        box-shadow:
          0 1px 1px rgba(0, 0, 0, 0.11),
          0 2px 2px rgba(0, 0, 0, 0.11),
          0 4px 4px rgba(0, 0, 0, 0.11),
          0 8px 8px rgba(0, 0, 0, 0.11),
          0 16px 16px rgba(0, 0, 0, 0.11);
      }

      /* 动画关键帧 */
      @keyframes slideUpFade {
        from {
          transform: translateY(10px);
          opacity: 0;
        }
        to {
          transform: translateY(0);
          opacity: 1;
        }
      }
      .animate-slide-up {
        animation: slideUpFade 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      }
    </style>
  </head>
  <body
    class="bg-slate-50 h-screen w-screen overflow-hidden text-slate-800 flex"
  >
    <!-- 左侧侧边栏 (z-index 保证在最上层或同层，这里不需要变动，因为弹窗现在位于右侧区域) -->
    <aside
      class="w-[320px] bg-white border-r border-slate-200 flex flex-col z-40 shadow-[4px_0_24px_rgba(0,0,0,0.02)] shrink-0"
    >
      <!-- 搜索区域 (双搜索) -->
      <div class="px-4 pt-5 pb-3 space-y-2.5 bg-white z-10">
        <!-- 全文检索 -->
        <div class="flex gap-2">
          <div class="relative flex-1 group">
            <i
              class="fa-solid fa-file-lines absolute left-3 top-2.5 text-slate-400 group-focus-within:text-primary transition-colors text-xs"
            ></i>
            <input
              type="text"
              placeholder="全文检索关键字..."
              class="w-full bg-slate-50 text-xs pl-8 pr-2 py-2 rounded border border-slate-200 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20 transition-all placeholder-slate-400"
            />
          </div>
          <button
            class="bg-orange-500 hover:bg-orange-600 text-white text-xs px-3 rounded font-medium shadow-sm transition-colors whitespace-nowrap"
          >
            检索
          </button>
        </div>

        <!-- 文件名检索 -->
        <div class="relative group">
          <i
            class="fa-solid fa-filter absolute left-3 top-2.5 text-slate-400 group-focus-within:text-primary transition-colors text-xs"
          ></i>
          <input
            type="text"
            placeholder="输入文件名查找..."
            class="w-full bg-slate-50 text-xs pl-8 pr-2 py-2 rounded border border-slate-200 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20 transition-all placeholder-slate-400"
          />
        </div>
      </div>

      <!-- 快捷操作区：紧凑型工具栏 (5列布局) -->
      <div class="px-4 py-1 bg-white">
        <div class="grid grid-cols-5 gap-1">
          <!-- 行 1 -->
          <button
            class="flex flex-col items-center justify-center gap-0.5 p-1.5 rounded hover:bg-slate-50 text-slate-500 hover:text-orange-500 transition group"
            title="显示"
          >
            <i class="fa-solid fa-eye text-sm mb-0.5"></i>
            <span class="text-[9px] scale-90">显示</span>
          </button>

          <button
            class="flex flex-col items-center justify-center gap-0.5 p-1.5 rounded hover:bg-slate-50 text-slate-500 hover:text-blue-500 transition group"
            title="多窗"
          >
            <i class="fa-solid fa-table-columns text-sm mb-0.5"></i>
            <span class="text-[9px] scale-90">多窗</span>
          </button>

          <!-- 核心按钮：切割 (保留强调样式，但更紧凑) -->
          <button
            onclick="openCutTool()"
            class="flex flex-col items-center justify-center gap-0.5 p-1.5 rounded bg-indigo-50 text-indigo-600 hover:bg-indigo-600 hover:text-white transition group shadow-sm ring-1 ring-indigo-100 border-indigo-200"
            title="PDF切割"
          >
            <i class="fa-solid fa-scissors text-sm mb-0.5"></i>
            <span class="text-[9px] font-bold scale-90">切割</span>
          </button>

          <button
            class="flex flex-col items-center justify-center gap-0.5 p-1.5 rounded hover:bg-slate-50 text-slate-500 hover:text-cyan-500 transition group"
            title="详情"
          >
            <i class="fa-solid fa-circle-info text-sm mb-0.5"></i>
            <span class="text-[9px] scale-90">详情</span>
          </button>

          <button
            class="flex flex-col items-center justify-center gap-0.5 p-1.5 rounded hover:bg-slate-50 text-slate-500 hover:text-slate-800 transition group"
            title="工具"
          >
            <i class="fa-solid fa-toolbox text-sm mb-0.5"></i>
            <span class="text-[9px] scale-90">工具</span>
          </button>

          <!-- 行 2 -->
          <button
            class="flex flex-col items-center justify-center gap-0.5 p-1.5 rounded hover:bg-slate-50 text-slate-500 hover:text-purple-500 transition group"
            title="采集"
          >
            <i class="fa-solid fa-file-signature text-sm mb-0.5"></i>
            <span class="text-[9px] scale-90">采集</span>
          </button>

          <button
            class="flex flex-col items-center justify-center gap-0.5 p-1.5 rounded hover:bg-slate-50 text-slate-500 hover:text-slate-800 transition group"
            title="回退"
          >
            <i class="fa-solid fa-rotate-left text-sm mb-0.5"></i>
            <span class="text-[9px] scale-90">回退</span>
          </button>

          <button
            class="flex flex-col items-center justify-center gap-0.5 p-1.5 rounded hover:bg-slate-50 text-slate-500 hover:text-emerald-500 transition group"
            title="OCR"
          >
            <i class="fa-solid fa-font text-sm mb-0.5"></i>
            <span class="text-[9px] scale-90">OCR</span>
          </button>

          <button
            class="flex flex-col items-center justify-center gap-0.5 p-1.5 rounded hover:bg-red-50 text-slate-400 hover:text-red-500 transition group"
            title="删除"
          >
            <i class="fa-regular fa-trash-can text-sm mb-0.5"></i>
            <span class="text-[9px] scale-90">删除</span>
          </button>
        </div>
      </div>

      <!-- 分割线 -->
      <div class="h-px bg-slate-100 mx-4 mt-2 mb-1"></div>

      <!-- 目录树：美化版 -->
      <div class="flex-1 overflow-y-auto thin-scrollbar px-3 pb-4">
        <div class="flex items-center justify-between px-2 pt-2 pb-3">
          <div
            class="text-[10px] font-bold text-slate-400 uppercase tracking-widest flex items-center gap-1"
          >
            <i class="fa-solid fa-list-ul"></i> 阅卷目录
          </div>
          <div
            class="text-[10px] text-slate-300 hover:text-primary cursor-pointer"
            ><i class="fa-solid fa-arrows-rotate"></i
          ></div>
        </div>

        <ul class="text-sm space-y-1 select-none" id="fileTree">
          <!-- 根节点：正卷 -->
          <li>
            <div
              class="flex items-center gap-2 py-1.5 px-2 rounded-md bg-slate-50/80 hover:bg-slate-100 text-slate-800 font-bold text-xs cursor-pointer transition-colors group"
            >
              <i
                class="fa-solid fa-caret-down text-slate-300 group-hover:text-slate-500 transition-colors"
              ></i>
              <i class="fa-solid fa-box-archive text-amber-500"></i>
              <span class="tracking-wide">正卷</span>
            </div>

            <!-- 一级子目录 -->
            <ul
              class="ml-[18px] pl-3 border-l border-dashed border-slate-200 mt-1 space-y-1 tree-line"
            >
              <!-- 文件夹：仲裁庭文件 -->
              <li>
                <div
                  class="flex items-center gap-2 py-1.5 px-2 rounded hover:bg-blue-50/50 cursor-pointer text-slate-700 transition-colors group"
                >
                  <i
                    class="fa-solid fa-caret-down text-slate-300 text-[10px] group-hover:text-blue-400"
                  ></i>
                  <i
                    class="fa-regular fa-folder-open text-blue-400 group-hover:text-blue-500"
                  ></i>
                  <span class="text-xs font-medium">仲裁庭文件</span>
                  <span class="ml-auto text-[9px] text-slate-300 font-mono"
                    >3</span
                  >
                </div>

                <!-- 二级文件列表 -->
                <ul
                  class="ml-[18px] pl-3 border-l border-dashed border-slate-200 mt-1 space-y-1 tree-line"
                >
                  <li>
                    <div
                      class="group flex items-center gap-2 py-1.5 px-2 rounded hover:bg-slate-50 cursor-pointer text-slate-600 transition-all border border-transparent hover:border-slate-100 relative overflow-hidden"
                    >
                      <i
                        class="fa-regular fa-file-pdf text-red-400 text-xs"
                      ></i>
                      <span
                        class="truncate text-xs opacity-90 group-hover:text-slate-900 group-hover:opacity-100"
                        >收案通知书</span
                      >
                      <!-- NEW 标签美化 -->
                      <div class="ml-auto flex items-center gap-1">
                        <span
                          class="text-[8px] font-bold text-orange-500 bg-orange-50 px-1 py-0.5 rounded border border-orange-100 transform scale-90"
                          >NEW</span
                        >
                      </div>
                    </div>
                  </li>
                  <li>
                    <!-- 选中状态美化 -->
                    <div
                      class="group flex items-center gap-2 py-1.5 px-2 rounded bg-indigo-50 border border-indigo-100 cursor-pointer shadow-sm relative overflow-hidden"
                    >
                      <div
                        class="absolute left-0 top-0 bottom-0 w-0.5 bg-indigo-500"
                      ></div>
                      <i
                        class="fa-regular fa-file-pdf text-red-500 text-xs"
                      ></i>
                      <span
                        class="truncate text-xs font-semibold text-indigo-900"
                        >(2025) 裁决书_终稿</span
                      >
                      <i
                        class="fa-solid fa-check-double text-green-500 text-[10px] ml-auto"
                      ></i>
                    </div>
                  </li>
                  <li>
                    <div
                      class="group flex items-center gap-2 py-1.5 px-2 rounded hover:bg-slate-50 cursor-pointer text-slate-600 transition-all border border-transparent hover:border-slate-100"
                    >
                      <i
                        class="fa-regular fa-file-word text-blue-500 text-xs"
                      ></i>
                      <span
                        class="truncate text-xs opacity-90 group-hover:text-slate-900"
                        >案件程序时间表</span
                      >
                    </div>
                  </li>
                </ul>
              </li>

              <!-- 文件夹：申请人 -->
              <li>
                <div
                  class="flex items-center gap-2 py-1.5 px-2 rounded hover:bg-blue-50/50 cursor-pointer text-slate-600 transition-colors group opacity-80 hover:opacity-100"
                >
                  <i
                    class="fa-solid fa-caret-right text-slate-300 text-[10px] group-hover:text-blue-400"
                  ></i>
                  <i
                    class="fa-regular fa-folder text-blue-300 group-hover:text-blue-400"
                  ></i>
                  <span class="text-xs">申请人上传材料</span>
                </div>
              </li>
              <!-- 文件夹：被申请人 -->
              <li>
                <div
                  class="flex items-center gap-2 py-1.5 px-2 rounded hover:bg-blue-50/50 cursor-pointer text-slate-600 transition-colors group opacity-80 hover:opacity-100"
                >
                  <i
                    class="fa-solid fa-caret-right text-slate-300 text-[10px] group-hover:text-blue-400"
                  ></i>
                  <i
                    class="fa-regular fa-folder text-blue-300 group-hover:text-blue-400"
                  ></i>
                  <span class="text-xs">被申请人上传材料</span>
                </div>
              </li>
              <!-- 文件夹：证据材料 -->
              <li>
                <div
                  class="flex items-center gap-2 py-1.5 px-2 rounded hover:bg-blue-50/50 cursor-pointer text-slate-600 transition-colors group opacity-80 hover:opacity-100"
                >
                  <i
                    class="fa-solid fa-caret-right text-slate-300 text-[10px] group-hover:text-blue-400"
                  ></i>
                  <i
                    class="fa-regular fa-folder text-blue-300 group-hover:text-blue-400"
                  ></i>
                  <span class="text-xs">证据材料</span>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </aside>

    <!-- 主工作区：空状态 (背景) -->
    <!-- 注意：当右侧面板滑出时，这个区域会被完全覆盖，但它仍然在 DOM 中 -->
    <main
      class="flex-1 bg-slate-100/50 flex items-center justify-center relative overflow-hidden z-10"
    >
      <!-- 装饰背景 -->
      <div
        class="absolute inset-0 bg-[radial-gradient(#e2e8f0_1px,transparent_1px)] [background-size:20px_20px] opacity-50"
      ></div>

      <div
        class="text-center relative z-10 p-10 bg-white/80 backdrop-blur rounded-2xl shadow-sm border border-white/50 max-w-md mx-auto"
      >
        <div
          class="w-20 h-20 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-6"
        >
          <i class="fa-solid fa-scale-balanced text-3xl text-primary"></i>
        </div>
        <h2 class="text-xl font-bold text-slate-800 mb-2">准备就绪</h2>
        <p class="text-slate-500 text-sm leading-relaxed mb-6">
          请从左侧目录选择文件进行预览，<br />或使用左侧工具栏的
          <span class="text-primary font-bold">"切割"</span> 工具处理 PDF。
        </p>
        <button
          onclick="openCutTool()"
          class="bg-white border border-slate-200 text-slate-700 px-6 py-2 rounded-full text-sm font-medium shadow-sm hover:border-primary hover:text-primary transition-colors"
        >
          打开切割工具
        </button>
      </div>
    </main>

    <!-- ================= 核心面板：PDF 切割工具 (右侧 Drawer) ================= -->
    <!-- 
        核心修改：
        1. 定位：fixed right-0 top-0 bottom-0 left-[320px] -> 保证紧贴左侧侧边栏，不遮挡侧边栏
        2. z-index：z-30 -> 位于 main (z-10) 之上，但位于 aside (z-40) 之下或同级（不覆盖aside即可）
        3. 动画：translate-x-full -> 从右向左滑出
    -->
    <div
      id="cutModal"
      class="fixed top-0 bottom-0 right-0 left-[320px] z-30 transform translate-x-full transition-transform duration-300 ease-in-out bg-white shadow-[-5px_0_15px_rgba(0,0,0,0.05)] border-l border-slate-200 flex flex-col overflow-hidden"
    >
      <!-- 面板 Header -->
      <div
        class="h-14 px-6 bg-white border-b border-slate-100 flex items-center justify-between shrink-0"
      >
        <div class="flex items-center gap-4">
          <div
            class="w-9 h-9 rounded-lg bg-indigo-50 flex items-center justify-center text-indigo-600"
          >
            <i class="fa-solid fa-scissors text-base"></i>
          </div>
          <div>
            <h2
              class="text-base font-bold text-slate-800 tracking-tight flex items-center gap-2"
            >
              PDF 智能分拆
              <span
                class="text-[10px] font-normal text-slate-400 border border-slate-200 rounded px-1.5 py-0.5"
                >Workspace</span
              >
            </h2>
          </div>
        </div>

        <div class="flex items-center gap-3">
          <div
            class="flex items-center gap-1.5 text-xs text-slate-500 bg-slate-50 px-3 py-1.5 rounded-full border border-slate-100"
          >
            <i class="fa-regular fa-file-pdf text-red-400"></i>
            <span class="font-mono">SOURCE_8811.pdf</span>
            <span class="text-slate-300">|</span>
            <span>15 Pages</span>
          </div>
          <div class="w-px h-4 bg-slate-200 mx-1"></div>
          <button
            onclick="closeCutTool()"
            class="w-8 h-8 rounded-full hover:bg-slate-100 flex items-center justify-center text-slate-400 hover:text-red-500 transition"
            title="关闭面板"
          >
            <i class="fa-solid fa-xmark text-lg"></i>
          </button>
        </div>
      </div>

      <!-- 内容区分栏 -->
      <div class="flex flex-1 overflow-hidden">
        <!-- 左侧：配置面板 (40%) -->
        <div
          class="w-[420px] shrink-0 border-r border-slate-100 flex flex-col bg-white z-10"
        >
          <!-- 列表头部 -->
          <div class="px-6 py-4 flex items-center justify-between">
            <h3
              class="text-sm font-bold text-slate-700 uppercase tracking-wider"
              >分拆规则</h3
            >
            <button
              onclick="addSplitRow()"
              class="text-xs flex items-center gap-1.5 bg-indigo-50 text-indigo-600 px-3 py-1.5 rounded-full hover:bg-indigo-100 font-medium transition-colors"
            >
              <i class="fa-solid fa-plus"></i> 新增规则
            </button>
          </div>

          <!-- 表格区域 -->
          <div class="flex-1 overflow-y-auto thin-scrollbar px-6 pb-4">
            <!-- 表头 -->
            <div
              class="grid grid-cols-12 gap-4 text-[11px] font-bold text-slate-400 uppercase mb-2 px-2"
            >
              <div class="col-span-6">文件名称</div>
              <div class="col-span-2 text-center">开始页</div>
              <div class="col-span-2 text-center">结束页</div>
              <div class="col-span-2 text-center"></div>
            </div>

            <div id="splitTableBody" class="space-y-1">
              <!-- 行 1 -->
              <div
                class="group grid grid-cols-12 gap-4 items-center p-2 rounded-lg hover:bg-slate-50 transition-colors animate-slide-up"
              >
                <div class="col-span-6">
                  <input
                    type="text"
                    value="仲裁申请书"
                    class="ghost-input w-full text-sm px-2 py-1.5 rounded text-slate-700 font-medium placeholder-slate-400"
                    placeholder="新文件名"
                  />
                </div>
                <div class="col-span-2">
                  <input
                    type="number"
                    value="1"
                    class="ghost-input w-full text-sm px-1 py-1.5 rounded text-center text-slate-600 font-mono"
                  />
                </div>
                <div class="col-span-2">
                  <input
                    type="number"
                    value="5"
                    class="ghost-input w-full text-sm px-1 py-1.5 rounded text-center text-slate-600 font-mono"
                  />
                </div>
                <div
                  class="col-span-2 text-center opacity-0 group-hover:opacity-100 transition-opacity"
                >
                  <button
                    onclick="deleteRow(this)"
                    class="text-slate-400 hover:text-red-500 p-1.5 rounded hover:bg-red-50 transition"
                  >
                    <i class="fa-regular fa-trash-can"></i>
                  </button>
                </div>
              </div>

              <!-- 行 2 -->
              <div
                class="group grid grid-cols-12 gap-4 items-center p-2 rounded-lg hover:bg-slate-50 transition-colors animate-slide-up"
                style="animation-delay: 0.05s"
              >
                <div class="col-span-6">
                  <input
                    type="text"
                    value="证据清单 (目录)"
                    class="ghost-input w-full text-sm px-2 py-1.5 rounded text-slate-700 font-medium placeholder-slate-400"
                    placeholder="新文件名"
                  />
                </div>
                <div class="col-span-2">
                  <input
                    type="number"
                    value="6"
                    class="ghost-input w-full text-sm px-1 py-1.5 rounded text-center text-slate-600 font-mono"
                  />
                </div>
                <div class="col-span-2">
                  <input
                    type="number"
                    value="8"
                    class="ghost-input w-full text-sm px-1 py-1.5 rounded text-center text-slate-600 font-mono"
                  />
                </div>
                <div
                  class="col-span-2 text-center opacity-0 group-hover:opacity-100 transition-opacity"
                >
                  <button
                    onclick="deleteRow(this)"
                    class="text-slate-400 hover:text-red-500 p-1.5 rounded hover:bg-red-50 transition"
                  >
                    <i class="fa-regular fa-trash-can"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- 底部 Action -->
          <div class="p-6 border-t border-slate-100 bg-slate-50/50">
            <div
              class="flex justify-between items-center mb-4 text-xs text-slate-500"
            >
              <span>预计生成文件数: <b id="fileCount">2</b></span>
              <span>覆盖范围: P1 - P8</span>
            </div>
            <button
              class="w-full bg-slate-900 hover:bg-slate-800 text-white py-3 rounded-xl shadow-lg shadow-slate-900/20 font-medium transition-all transform active:scale-[0.98] flex items-center justify-center gap-2"
            >
              <span>执行并保存</span>
              <i class="fa-solid fa-arrow-right"></i>
            </button>
          </div>
        </div>

        <!-- 右侧：PDF 预览 (60%) -->
        <div class="flex-1 bg-[#2e333d] relative flex flex-col">
          <!-- 悬浮式 PDF 工具栏 -->
          <div
            class="absolute top-4 left-1/2 -translate-x-1/2 z-20 bg-[#1e2024]/90 backdrop-blur text-slate-300 px-4 py-2 rounded-full shadow-floating flex items-center gap-4 border border-white/10 transition-all hover:bg-[#1e2024]"
          >
            <button onclick="changePage(-1)" class="hover:text-white transition"
              ><i class="fa-solid fa-chevron-left"></i
            ></button>
            <span
              class="font-mono text-sm min-w-[3ch] text-center"
              id="pageIndicator"
              >1</span
            >
            <span class="text-slate-500 text-sm">/ 15</span>
            <button onclick="changePage(1)" class="hover:text-white transition"
              ><i class="fa-solid fa-chevron-right"></i
            ></button>

            <div class="w-px h-4 bg-white/10 mx-1"></div>

            <button class="hover:text-white transition text-xs"
              ><i class="fa-solid fa-minus"></i
            ></button>
            <span class="text-xs font-mono">100%</span>
            <button class="hover:text-white transition text-xs"
              ><i class="fa-solid fa-plus"></i
            ></button>
          </div>

          <!-- 预览画板 -->
          <div
            class="flex-1 overflow-auto custom-scrollbar flex justify-center pt-20 pb-20 cursor-grab active:cursor-grabbing"
            id="pdfContainer"
          >
            <!-- PDF 页面 -->
            <div
              id="pdfPage"
              class="bg-white w-[595px] h-[842px] real-shadow relative transition-all duration-300 origin-top"
            >
              <!-- 水印 -->
              <div
                class="absolute inset-0 flex items-center justify-center pointer-events-none overflow-hidden"
              >
                <div
                  class="text-[120px] font-bold text-slate-900/[0.03] -rotate-45 select-none whitespace-nowrap"
                  >PREVIEW ONLY</div
                >
              </div>

              <!-- 内容 -->
              <div
                class="p-[50px] h-full flex flex-col text-slate-800 font-serif leading-relaxed"
              >
                <div
                  class="flex items-center justify-between border-b-4 border-slate-900 pb-6 mb-10"
                >
                  <div class="flex flex-col">
                    <span class="text-3xl font-bold tracking-tighter"
                      >SCIA</span
                    >
                    <span
                      class="text-[10px] tracking-[0.2em] mt-1 text-slate-500"
                      >SHENZHEN INT'L ARBITRATION</span
                    >
                  </div>
                  <div
                    class="w-16 h-16 border border-slate-200 flex items-center justify-center bg-slate-50"
                  >
                    <i
                      class="fa-solid fa-stamp text-red-700/50 text-3xl rotate-[-15deg]"
                    ></i>
                  </div>
                </div>

                <div class="text-center mb-12">
                  <h1 class="text-2xl font-bold mb-3 text-slate-900"
                    >仲裁通知书</h1
                  >
                  <div
                    class="text-sm font-mono text-slate-500 bg-slate-100 inline-block px-3 py-1 rounded"
                    >No. (2025) 8811-4</div
                  >
                </div>

                <div class="space-y-6 text-sm text-justify">
                  <p>
                    <strong class="block text-slate-900 mb-1"
                      >申请人 (Claimant):</strong
                    >
                    <span class="border-b border-dotted border-slate-400 pb-0.5"
                      >潘水平 (Pan Shuiping)</span
                    >
                  </p>
                  <p>
                    <strong class="block text-slate-900 mb-1"
                      >被申请人 (Respondent):</strong
                    >
                    <span class="border-b border-dotted border-slate-400 pb-0.5"
                      >湖北帝蓝法律咨询有限公司</span
                    >
                  </p>

                  <div class="py-4"></div>

                  <p class="indent-8">
                    根据《中华人民共和国仲裁法》及本院仲裁规则，本院已受理上述当事人之间的合同纠纷案。现将仲裁庭组成情况通知如下：
                  </p>
                  <p class="indent-8">
                    经审核，首席仲裁员由
                    <strong class="text-slate-900">程浩</strong>
                    担任。仲裁庭将于 2025年10月30日 16:50
                    在本院第11仲裁庭开庭审理。请各方当事人准时出席。
                  </p>
                </div>

                <div
                  class="mt-auto flex justify-between items-end pt-10 border-t border-slate-100"
                >
                  <div class="w-20 h-20 bg-slate-900 text-white p-1">
                    <!-- 模拟二维码 -->
                    <div
                      class="w-full h-full border-2 border-dashed border-white/30 flex items-center justify-center text-[8px] text-center leading-tight"
                    >
                      Doc<br />Verif.<br />Code
                    </div>
                  </div>
                  <div class="text-right">
                    <div class="text-xs text-slate-400 mb-2"
                      >签署日期 / Date</div
                    >
                    <div class="font-mono text-sm text-slate-700"
                      >2025.10.11</div
                    >
                  </div>
                </div>

                <div
                  class="absolute bottom-4 left-0 right-0 text-center text-[10px] text-slate-400 font-mono"
                >
                  - Page <span id="pdfPageNum">1</span> -
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script>
      // Drawer Logic
      const modal = document.getElementById('cutModal')
      let isModalOpen = false

      function openCutTool() {
        modal.classList.remove('translate-x-full')
        isModalOpen = true
      }

      function closeCutTool() {
        modal.classList.add('translate-x-full')
        isModalOpen = false
      }

      // Auto Open for Demo
      window.onload = function () {
        setTimeout(openCutTool, 600)
      }

      // Add Row Logic
      function addSplitRow() {
        const container = document.getElementById('splitTableBody')
        const fileCount = document.getElementById('fileCount')

        const div = document.createElement('div')
        div.className =
          'group grid grid-cols-12 gap-4 items-center p-2 rounded-lg hover:bg-slate-50 transition-colors animate-slide-up'
        div.innerHTML = `
                <div class="col-span-6">
                    <input type="text" class="ghost-input w-full text-sm px-2 py-1.5 rounded text-slate-700 font-medium placeholder-slate-400 focus:bg-white focus:shadow-sm" placeholder="输入文件名称...">
                </div>
                <div class="col-span-2">
                    <input type="number" class="ghost-input w-full text-sm px-1 py-1.5 rounded text-center text-slate-600 font-mono focus:bg-white focus:shadow-sm">
                </div>
                <div class="col-span-2">
                    <input type="number" class="ghost-input w-full text-sm px-1 py-1.5 rounded text-center text-slate-600 font-mono focus:bg-white focus:shadow-sm">
                </div>
                <div class="col-span-2 text-center opacity-0 group-hover:opacity-100 transition-opacity">
                    <button onclick="deleteRow(this)" class="text-slate-400 hover:text-red-500 p-1.5 rounded hover:bg-red-50 transition">
                        <i class="fa-regular fa-trash-can"></i>
                    </button>
                </div>
            `
        container.appendChild(div)

        // Scroll to bottom
        container.parentElement.scrollTop = container.parentElement.scrollHeight

        // Update Fake Counter
        fileCount.innerText = container.children.length
      }

      function deleteRow(btn) {
        const row = btn.closest('.grid')
        row.style.transform = 'translateX(-10px)'
        row.style.opacity = '0'
        setTimeout(() => {
          row.remove()
          document.getElementById('fileCount').innerText =
            document.getElementById('splitTableBody').children.length
        }, 200)
      }

      // PDF Pagination Logic
      let currentPage = 1
      const totalPages = 15

      function changePage(delta) {
        const newPage = currentPage + delta
        if (newPage >= 1 && newPage <= totalPages) {
          currentPage = newPage

          // Update UI
          document.getElementById('pageIndicator').innerText = currentPage
          document.getElementById('pdfPageNum').innerText = currentPage

          // Animation
          const pdfPage = document.getElementById('pdfPage')
          pdfPage.style.opacity = '0.8'
          pdfPage.style.transform = 'translateY(5px)'

          setTimeout(() => {
            pdfPage.style.opacity = '1'
            pdfPage.style.transform = 'translateY(0)'

            // Content Simulation
            const title = pdfPage.querySelector('h1')
            if (currentPage % 2 === 0) {
              title.innerText = '证据清单 (Evidence List)'
            } else {
              title.innerText = '仲裁通知书 (Notice)'
            }
          }, 150)
        }
      }
    </script>
  </body>
</html>
